<!--
根据扫描规则动态加载所有符合条件的页面或组件。
例如当前规则：'/src/views/**/index.vue'，所有在views文件夹下的index.vue文件都可以被这个组件访问到。
-->
<template>
  <component ref="el" v-if="component" :is="component" v-bind="$attrs"></component>
  <div v-else class="fit"></div>
</template>

<script setup>
import path from "path-browserify"
import NotFound from "./ErrorNotFound.vue"
import {useRoute} from "vue-router";
import {defineAsyncComponent, onBeforeMount, ref, shallowRef} from "vue";

const route = useRoute()
const props = defineProps({
  path: String
})
const views = import.meta.glob('/src/views/**/index.vue')
const component = shallowRef()
const el = ref()
function getPageByRoute() {
  let url = props.path || ('/' + route.params.path?.join('/'))
  if(!url) return
  url = '/src/views' + path.join(url, '/index.vue')
  if (views[url]) {
    component.value = defineAsyncComponent(views[url])
  } else component.value = NotFound
}

onBeforeMount(() => {
  getPageByRoute()
})

defineExpose({contentRef: el})
</script>

<style scoped>

</style>
